<template>
  <div style="margin: 20px">
    <div class="buy_box">
      <div class="content" style="">
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            background: #fcfcfc;
            color: #6c757d !important;
          "
        >
          <div> Android教程 </div>
          <!-- <div> 发放时间 </div> -->
        </div>
        <div class="ccc" v-for="item in 5" :key="item">
          <div style="color: #212529; font-size: 1.2rem !important; font-weight: bold">
            v2rayng
          </div>
          <div style="position: relative; top: 5px; font-size: 10px"> 最后更新: 2023/09/07 </div>
        </div>
      </div>
    </div>

    <div class="buy_box">
      <div class="content" style="">
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            background: #fcfcfc;
            color: #6c757d !important;
          "
        >
          <div> IOS/iPad教程 </div>
          <!-- <div> 发放时间 </div> -->
        </div>
        <div class="ccc" v-for="item in 5" :key="item">
          <div style="color: #212529; font-size: 1.2rem !important; font-weight: bold">
            v2rayng
          </div>
          <div style="position: relative; top: 5px; font-size: 10px"> 最后更新: 2023/09/07 </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>
<style scoped>
  .buy_box .header {
    display: flex;
    align-items: center;

    /* padding: 10px; */
    height: 50px;
    background-color: #fafafa;
  }

  .ccc {
    display: flex;
    flex-direction: column;

    /* justify-content: space-between; */
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: white;
    color: #6c757d !important;
  }

  .ccc:hover {
    background: #f1f1f1;
  }
</style>
